<template>
  <div>
    <div class="root-box">
      <div class="chart-wrapper chart1 chart-small">
        <van-cell title="年度走访" />
        <canvas id="zoufangjihua"></canvas>
      </div>
      <div class="chart-wrapper chart1">
        <van-cell title="企业问题" >
          <van-icon name="question-o"  size="18" @click="explainShow=true"/>
        </van-cell>
        
        <canvas id="yichangpaicha"></canvas>
      </div>
      <div class="chart-wrapper">
        <van-cell title="问题处置率" />
        <canvas id="wentichuzhilv"></canvas>
      </div>
      <van-popup
        v-model="explainShow"
        style="width:80%"
      >
      <div class="explaimBox">
        <p>一级问题：生产安全/金融风险</p>
        <p>二级问题：经营异常/社保异常/税收异常/失信处罚</p>
        <p>三级问题：用能异常/访客激增/人员骤减/垃圾分类</p>
      </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  zoufangjihua,
  yichangpaicha,
  wentichuzhilv,
} from "../../assets/js/f2.js";
export default {
  data() {
    return {
      explainShow: false,
    };
  },
  created() {},
  mounted() {
    var zoufangData = [
      {
        country: "2019",
        走访数量: 18203,
      },
      {
        country: "2020",
        走访数量: 23489,
      },
    ];
    var yichangpaichaData = [
      {
        年龄段: "异常企业数",
        State: "2019年A类问题",
        人口数量: 280,
      },
      {
        年龄段: "异常企业数",
        State: "2019年B类问题",
        人口数量: 324,
      },
      {
        年龄段: "异常企业数",
        State: "2020年A类问题",
        人口数量: 150,
      },
      {
        年龄段: "异常企业数",
        State: "2020年B类问题",
        人口数量: 198,
      },
      {
        年龄段: "排查企业问题数",
        State: "2019年A类问题",
        人口数量: 268,
      },
      {
        年龄段: "排查企业问题数",
        State: "2019年B类问题",
        人口数量: 324,
      },
      {
        年龄段: "排查企业问题数",
        State: "2020年A类问题",
        人口数量: 148,
      },
      {
        年龄段: "排查企业问题数",
        State: "2020年B类问题",
        人口数量: 195,
      },
    ];
    // f2Init2();
    // zoufangjihua("zoufangjihua", zoufangData);
    // yichangpaicha("yichangpaicha", yichangpaichaData);
    this.getJHZF();
    this.getQYWT();
    this.getWTCZL();
  },
  methods: {
    // 年度走访
    getJHZF() {
      this.$api.interviewApi({ type: "getJHZF" }).then((res) => {
        const data = res.data.data.num;
        let chartData = [];
        data.forEach((event, index) => {
          chartData.push({
            country: res.data.data.years[index],
            走访数量: event - 0,
          });
        });
        zoufangjihua("zoufangjihua", chartData);
      });
    },
    getQYWT() {
      this.$api.interviewApi({ type: "getQYWT" }).then((res) => {
        // let yichangpaichaData = [
        //   {
        //     类别: "异常企业数",
        //     State: "2019年A类问题",
        //     问题数量: 280,
        //   },
        //   {
        //     类别: "异常企业数",
        //     State: "2019年B类问题",
        //     问题数量: 324,
        //   },
        //   {
        //     类别: "异常企业数",
        //     State: "2020年A类问题",
        //     问题数量: 150,
        //   },
        //   {
        //     类别: "异常企业数",
        //     State: "2020年B类问题",
        //     问题数量: 198,
        //   },
        //   {
        //     类别: "排查企业问题数",
        //     State: "2019年A类问题",
        //     问题数量: 268,
        //   },
        //   {
        //     类别: "排查企业问题数",
        //     State: "2019年B类问题",
        //     问题数量: 324,
        //   },
        //   {
        //     类别: "排查企业问题数",
        //     State: "2020年A类问题",
        //     问题数量: 148,
        //   },
        //   {
        //     类别: "排查企业问题数",
        //     State: "2020年B类问题",
        //     问题数量: 195,
        //   },
        // ];
        const data = res.data.data;
        const year = new Date().getFullYear()
        let chartData = [];
        if(data.value.length==3){
          data.value.push([year-1,0,'wtjb-yj',0],[year-1,0,'wtjb-ej',0],[year-1,0,'wtjb-sj',0])
        }
        data.value.forEach((event, index) => {
          if (event[2] == "wtjb-ej") {
            chartData.push(
              {
                类别: "排查企业问题数",
                State: `${event[0]}年二级问题`,
                问题数量: (event[1]-0) || 0,
                index: 2,
              },
              {
                类别: "异常企业数",
                State: `${event[0]}年二级问题`,
                问题数量: event[3] || 0,
                index: 3,
              }
            );
          } else if (event[2] == "wtjb-sj") {
            chartData.push(
              {
                类别: "排查企业问题数",
                State: `${event[0]}年三级问题`,
                问题数量: (event[1]-0) || 0,
                index: 4,
              },
              {
                类别: "异常企业数",
                State: `${event[0]}年三级问题`,
                问题数量: event[3] || 0,
                index: 5,
              }
            );
          } else {
            chartData.push(
              {
                类别: "排查企业问题数",
                State: `${event[0]}年一级问题`,
                问题数量:( event[1]-0) || 0,
                index: 0,
              },
              {
                类别: "异常企业数",
                State: `${event[0]}年一级问题`,
                问题数量: event[3] || 0,
                index: 1,
              }
            );
          }
        });
        if (!data.value.find((x) => x[2] == "wtjb-yj")) {
          chartData.push(
            {
              类别: "排查企业问题数",
              State: `${data.value[0][0]}年一级问题`,
              问题数量: 0,
              index: 0,
            },
            {
              类别: "异常企业数",
              State: `${data.value[2][0]}年一级问题`,
              问题数量: 0,
              index: 1,
            }
          );
        }
        chartData.sort((a, b) => a.index - b.index);
        chartData.sort(
          (a, b) => a.State.substring(0, 3) - b.State.substring(0, 3)
        );
        console.log("chartData", chartData);
        yichangpaicha("yichangpaicha", chartData);
      });
    },
    // 问题处置率
    getWTCZL() {
      this.$api.interviewApi({ type: "getWTCZL" }).then((res) => {
        wentichuzhilv("wentichuzhilv", (res.data.data.num[0] * 100).toFixed(2));
      });
    },
  },
};
</script>

<style scoped lang="less">
.root-box {
  padding: 0 16px;
}
.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.root {
  padding: 0 20px;
}
.van-row {
  flex-wrap: wrap;
}
.col {
  position: relative;
  text-align: center;
  background: #fff;
  padding: 20px 0;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.chart-wrapper {
  width: cale(100% - 20px);
  height: 300px;
  margin: 10px 0 65px;
}
.chart-wrapper canvas {
  width: 100%;
  height: 100%;
}
.chart-wrapper2 {
  margin: 10px 0;
}
canvas {
  background: #fff;
  padding-bottom: 10px;
}
p {
  margin: 0;
}
.content-box {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  height: 30px;
  background: #fff;
}
.point {
  float: left;
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(66, 122, 243);
}
.color2 {
  background: #7ecf51;
}
.color3 {
  background: #eecb5f;
}
.color4 {
  background: #e3935d;
}
.color5 {
  background: #e16757;
}
.content-box .right-box {
  width: calc(100% - 40px);
  margin-right: 10px;
  line-height: 19px;
  float: right;
  display: flex;
  justify-content: space-between;
}
.content-box .right-box p:nth-child(1) {
  font-size: 14px;
  color: #000;
}
.content-box .right-box p:nth-child(2) {
  font-size: 12px;
  color: #ccc;
}
.chart-wrapper .col {
  font-size: 12px;
  background: #8dcdee;
  box-shadow: none;
}
.last-box {
  background: #fff;
  height: 310px;
  padding: 0 10px 20px;
  margin-bottom: 10px;
}
.chart-big {
  height: 450px;
}
.newAddTag {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(30%, -20%);
}
.chart-small {
  height: 250px;
}
.explaimBox{
  padding: 15px 25px;
}
.explaimBox p{
  font-size: 14px;
}
</style>
